<template>
  <base-layout
    :dialog-title="dialogTitle"
    :dialog-visible="dialogVisible"
    @dialog-close="dialogClose"
    :dialogWidth="dialogWidth"
  >
    <template #searchPanel>
      <search-panel v-slot="{ form }" @search="search" @insert="addService" :showAddButton="true" :addPer="authConfig.add" :selectPer="authConfig.query">
        <job-shop v-model="form.storeId" placeholder="所属门店" />
        <el-select clearable v-model="form.status" style="width: 120px" placeholder="广告状态">
          <el-option
            v-for="item in dict.status"
            :key="item.index"
            :value="item.value"
            :label="item.label"
          />
        </el-select>
        <el-select clearable v-model="form.type" style="width: 150px" placeholder="广告类型">
          <el-option
            v-for="item in dict.types"
            :key="item"
            :value="item"
            :label="item"
          />
        </el-select>
        <el-input   v-model="form.title" clearable placeholder="请输入广告标题" style="width: 200px"/>
      </search-panel>
    </template>

    <template #contentPanel>
      <data-table
        :value="tableData"
        :total-count="totalCount"
        :has-action="true"
        :table-column-attributes="tableColumnAttributes"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :width="160"
      >
        <template #action="{row}">
          <i class="el-icon-edit" title="编辑" style="cursor: pointer;" v-permission="authConfig.edit" @click="handleDataUpdateEdit(row, '编辑')"></i>
          <i class="el-icon-delete" title="删除" style="color:red; margin-left: 20px;cursor: pointer" v-permission="authConfig.del" @click="handleDataDelete(row)"></i>
        </template>
      </data-table>
      <!--工具条-->

    </template>
    <template #dialog>
      <dialog-data-form :advert="advert"  @operate="handleDataOperate"/>
    </template>
  </base-layout>
</template>

<script>
  import { 
    dataList,
    details,
    addData,
    updateData,
    deleteData,
    status
  } from  '@/api/after-sale/systemManage/advert'
  import baseMixin from '@/mixins/base'
  import  DialogDataForm from './components/DialogDataForm.vue'
  import { parseTimeToYMDHMS } from '@/utils'

  export default {
    components: {
      DialogDataForm
    },
    mixins: [
      baseMixin({
        findData: dataList,
        addData: addData,
        deleteData: deleteData,
        dataName: ['content', 'totalRecords'],
        isAdd: false,
        findDataById: details,
        updateData: updateData,
        idName: 'id',
        format(res) {
          return res.map(data => {
              data.updateTime = data.updateTime ? parseTimeToYMDHMS(data.updateTime) : '';
              data.statusText = data.status ? '启用' : '停用'
            return data
          })
        },
      })
    ],
    data() {
      return {
        authConfig: {
          query: 'advertising:page',
          add: 'advertising:save',
          edit: 'advertising:update',
          del: 'advertising:delete',
          stop: 'advertising:stop',
          start: 'advertising:start',
        },
        dialogVisible: false,
        communitys: [],
        dialogWidth:'700px',
        service:{},
        dict: {
          status: [
            {label: '启用', value: true, index: 1},
            {label: '禁用', value: false, index: 2},
          ],
          types: ['PC端', 'APP端']
        },
        isAdd: false,
        tableColumnAttributes: [
          {name: '所属门店', value: 'storeName', type: 'text', width: '200'},
          {name: '广告标题', value: 'title', type: 'text', width: '200'},
          {name: '广告类型', value: 'type', type: 'text'},
          {name: '广告位置', value: 'site', type: 'text'},
          {name: '广告备注', value: 'remark', type: 'text'},
          {name: '点击跳转页面地址', value: 'url', type: 'text', width: '200'},
          {name: '点击量', value: 'num', type: 'text'},
          {name: '广告状态', valueId: 'status', value: 'statusText', type: 'switch', switchPer: '114', action: this.updateState, width: '150' },
          {name: '修改日期', value: 'updateTime', type: 'text', width: '150'}
        ]
      }
    },
    async created() {},
    methods: {
      search(form) {
        this.searchOptions = {
          status: form.status,
          title: form.title,
          storeId: form.storeId,
          type: form.type
        }
        this.currentPage = 1
        this.setTableData()
      },
      handleDataUpdateEdit(row){
        this.advert = row;
        this.handleDataInsert('编辑广告');
      },
      getAdverts(row){
        getAdvert(row.id).then(result =>{
           if(result.code == "0"){
             this.advert = result.data;
             this.advert.type = this.advert.type + ''
             this.handleDataChange(row);
           }
        });
      },
      addService(){
        this.advert = {};
        this.handleDataInsert('添加广告')
      },
      async updateState(row) {
        const type = row.status ? 'stop' : 'start';
        const { success } = await status(row.id, type)
        if (success) {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.setTableData()
        } else {
          this.$message.error('操作失败')
        }
      }
    },
    mounted() {

    }
  }
</script>

<style lang="scss" scoped>
  .vLine {
    border-left: solid 3px black;
    height: 16px;
    vertical-align: bottom;
    display: inline-block;
  }
</style>
